<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/public/css/min.css">
    <title th:text="${companyProfile.name}"></title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link rel="stylesheet" href="/public/css/style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="/public/css/pagenavi-css.css" type="text/css" media="all"/>
    <script type="text/javascript" src="/public/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/public/js/bootstrap.js"></script>
</head>
<body data-theme-url="" data-device="desktop"
      class="home page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php page page-id-5 language-en">
<div class="loadingBg">
    <div class="loadinglg">
        <div class="ldlogo"></div>
        <div class="ldbg"></div>
    </div>
</div>
<div class="scroller-wrapper" scrollbar>
    <div class="component-transition-line">
        <div class="transition-line__wrapper">
            <div class="transition-line__line">
                <svg class="transition-line__svg" x="0px" y="0px" viewBox="0 0 1920 3105">
                    <path fill="none" stroke-width="4"
                          d="M861.1,1200c120.8-257.7,320.9-290.4,379.8-527.1c30-120.7-0.7-237.2-5.8-255.8 c-35.3-128.4-114.8-193.9-158-232C1036.8,149.8,960.6,82.7,881.7-4.5"/>
                    <path fill="none" stroke-width="4"
                          d="M695,3102c5.5-82.9,49.5-158,86.1-221.6c90.3-157,135.5-235.5,148-265.1c18.3-43.5,91.8-217.8,72-422.5 c-7.1-72.8-39.4-160.8-104-336.9c-70.6-192.2-84.4-195.4-100-265.1c-33.6-149.6-3.1-247.7,64-390.8"/>
                </svg>
            </div>
        </div>
    </div>
    <!--#include file="/views/component/header.html"-->
    <div th:replace="header :: header"></div>

    <main id="barba-wrapper">
        <section class="barba-container" data-namespace="home">
            <div class="misc-sticky || js-scroll js-printed-checker">
                <div class="misc-sticky__wrapper wrapper--left">
                    <div class="component-nav-vertical">
                        <div class="nav-vertical__list"></div>
                        <div class="nav-vertical__arrow">
                            <button class="arrow-line arrow--bottom"><img src="/public/images/r-line-w.png" /></button>
                            <button class="arrow-line arrow--top"><img src="/public/images/r-line-w.png" /></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home__top || js-uicolor-checker" data-color="transparent" data-nav-vertical-target>
                <div class="component-slider-home js-scroll js-printed-checker">
                    <div class="slider-home__circle">
                        <svg class="circle__dash" x="0px" y="0px" viewBox="0 0 500 500"
                             enable-background="new 0 0 500 500"
                             xml:space="preserve">
                <g class="dash__group">
                  <line class="dash__line" fill="none" stroke-miterlimit="10" x1="250.4" y1="22.5" x2="250.4"
                        y2="28.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="230.6" y1="23.3" x2="231.1"
                          y2="29.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="210.9" y1="25.9" x2="211.9"
                          y2="31.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="191.5" y1="30.2" x2="193.1"
                          y2="36.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="172.6" y1="36.1" x2="174.6"
                          y2="41.8"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="154.2" y1="43.7" x2="156.8"
                          y2="49.2"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="136.6" y1="52.8" x2="139.6"
                          y2="58.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="119.8" y1="63.4" x2="123.3"
                          y2="68.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="104.1" y1="75.5" x2="108"
                          y2="80.2"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="89.4" y1="88.9" x2="93.7"
                          y2="93.2"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="76" y1="103.5" x2="80.7"
                          y2="107.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="63.9" y1="119.2" x2="68.9"
                          y2="122.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="53.2" y1="135.9" x2="58.5"
                          y2="139"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="44" y1="153.5" x2="49.5"
                          y2="156.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="36.4" y1="171.8" x2="42.1"
                          y2="173.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="30.4" y1="190.7" x2="36.3"
                          y2="192.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="26" y1="210.1" x2="32.1"
                          y2="211.2"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="23.4" y1="229.8" x2="29.5"
                          y2="230.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="22.5" y1="249.6" x2="28.6"
                          y2="249.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="23.3" y1="269.4" x2="29.4"
                          y2="268.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="25.9" y1="289.1" x2="31.9"
                          y2="288.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="30.2" y1="308.5" x2="36.1"
                          y2="306.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="36.1" y1="327.4" x2="41.8"
                          y2="325.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="43.7" y1="345.8" x2="49.2"
                          y2="343.2"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="52.8" y1="363.4" x2="58.1"
                          y2="360.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="63.4" y1="380.2" x2="68.4"
                          y2="376.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="75.5" y1="395.9" x2="80.2"
                          y2="392"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="88.9" y1="410.6" x2="93.2"
                          y2="406.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="103.5" y1="424" x2="107.4"
                          y2="419.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="119.2" y1="436.1" x2="122.7"
                          y2="431.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="135.9" y1="446.8" x2="139"
                          y2="441.5"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="153.5" y1="456" x2="156.1"
                          y2="450.5"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="171.8" y1="463.6" x2="173.9"
                          y2="457.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="190.7" y1="469.6" x2="192.3"
                          y2="463.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="210.1" y1="474" x2="211.2"
                          y2="467.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="229.8" y1="476.6" x2="230.3"
                          y2="470.5"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="249.6" y1="477.5" x2="249.6"
                          y2="471.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="269.4" y1="476.7" x2="268.9"
                          y2="470.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="289.1" y1="474.1" x2="288.1"
                          y2="468.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="308.5" y1="469.8" x2="306.9"
                          y2="463.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="327.4" y1="463.9" x2="325.4"
                          y2="458.2"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="345.8" y1="456.3" x2="343.2"
                          y2="450.8"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="363.4" y1="447.2" x2="360.4"
                          y2="441.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="380.2" y1="436.6" x2="376.7"
                          y2="431.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="395.9" y1="424.5" x2="392"
                          y2="419.8"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="410.6" y1="411.1" x2="406.3"
                          y2="406.8"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="424" y1="396.5" x2="419.3"
                          y2="392.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="436.1" y1="380.8" x2="431.1"
                          y2="377.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="446.8" y1="364.1" x2="441.5"
                          y2="361"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="456" y1="346.5" x2="450.5"
                          y2="343.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="463.6" y1="328.2" x2="457.9"
                          y2="326.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="469.6" y1="309.3" x2="463.7"
                          y2="307.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="474" y1="289.9" x2="467.9"
                          y2="288.8"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="476.6" y1="270.2" x2="470.5"
                          y2="269.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="477.5" y1="250.4" x2="471.4"
                          y2="250.4"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="476.7" y1="230.6" x2="470.6"
                          y2="231.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="474.1" y1="210.9" x2="468.1"
                          y2="211.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="469.8" y1="191.5" x2="463.9"
                          y2="193.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="463.9" y1="172.6" x2="458.2"
                          y2="174.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="456.3" y1="154.2" x2="450.8"
                          y2="156.8"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="447.2" y1="136.6" x2="441.9"
                          y2="139.6"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="436.6" y1="119.8" x2="431.6"
                          y2="123.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="424.5" y1="104.1" x2="419.8"
                          y2="108"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="411.1" y1="89.4" x2="406.8"
                          y2="93.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="396.5" y1="76" x2="392.6"
                          y2="80.7"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="380.8" y1="63.9" x2="377.3"
                          y2="68.9"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="364.1" y1="53.2" x2="361"
                          y2="58.5"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="346.5" y1="44" x2="343.9"
                          y2="49.5"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="328.2" y1="36.4" x2="326.1"
                          y2="42.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="309.3" y1="30.4" x2="307.7"
                          y2="36.3"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="289.9" y1="26" x2="288.8"
                          y2="32.1"/>
                    <line class="dash__line" fill="none" stroke-miterlimit="10" x1="270.2" y1="23.4" x2="269.7"
                          y2="29.5"/>
                </g>
                </svg>
                        <svg class="circle__stroke" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
                            <circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="250" cy="250" r="240.5"/>
                        </svg>
                        <svg class="circle__stroke-big__wrapper" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
                            <circle class="circle__stroke-big" fill="none" stroke-width="3" stroke-miterlimit="10" cx="250" cy="250" r="242"/>
                        </svg>
                        <div class="circle__degrees">
                            <div class="degrees__wrapper">
                                <p class="degrees__text js-scroll || js-printed-checker">40</p>
                            </div>
                        </div>
                    </div>
                    <div class="slider-home__center">
                        <h2 class="title2" th:text="${session.lang == 'en' ? companyProfile.homeTitle1En : companyProfile.homeTitle1}">生命科学仪器</h2>
                        <h2 class="slider-home__title" ><span th:text="${session.lang == 'en' ? companyProfile.homeTitle2En : companyProfile.homeTitle2}"></span></h2>
                        <h2 class="title2" th:text="${session.lang == 'en' ? companyProfile.homeTitle3En : companyProfile.homeTitle3}">核心光学部件</h2>
                        <div class="slider-home__arrows">
                            <button class="arrow-line arrow-prev"><img src="/public/images/r-line-w.png" /></button>
                            <div class="slider-home__arrows__wrapper">
                                <div class="slider-home__btns"></div>
                                <div class="slider-home__btns"></div>
                                <div class="slider-home__btns"></div>
                                <div class="slider-home__btns"></div>
                                <div class="slider-home__btns"></div>
                                <div class="slider-home__btns"></div>
                            </div>
                            <button class="arrow-line arrow-next"><img src="/public/images/r-line-w.png" /></button>
                        </div>
                    </div>
                    <div class="slider-home__back || js-scroll" data-speed="-2">
                        <div class="slider-home__slide" th:each="h: ${homeBanners}">
                            <div class="slide__wrapper">
                                <span th:style="'background-image: url(\'' + ${h.imageUrl} + '\' )'"></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="home__stats || js-uicolor-checker" data-color="blue" data-nav-vertical-target th:style="'background: url(' + (${companyProfile.homeBg1}) + ') no-repeat;background-size: 100% 100%;background-position: center center;'">
                <div class="position-center || js-scroll js-printed-checker" id="gundong" onpropertychange="onIeChange(event)">
                    <div class="stats__wrapper" th:each="s, status: ${secondScreens}">
                        <span th:text="${session.lang == 'en' ? s.titleEn : s.title}">占地面积㎡</span>
                        <span th:id="'num' + ${status.index + 1}" th:data-num="${s.value}" th:text="${s.value}">100000</span>
                        <span th:text="${s.desc}">宁波、南京和镇海三处厂区</span>
                        <span th:text="${s.descEn}">Three factories in Ningbo, Nanjing and Zhenhai</span>
                    </div>

                </div>
            </div>
            <div class="home__solutions || js-uicolor-checker" data-color="white" data-nav-vertical-target th:style="'background: url(' + (${companyProfile.homeBg2}) + ') no-repeat; background-size: 100% 100%;background-position: center center;'">
                <div class="position-center">
                    <div class="center-in || row row--md-2 || js-scroll js-printed-checker">
                        <div class="home__sub-title || row__item">
                            <div>科技创新<br>行业领先</div>
                            <div class="img"><img th:src="${companyProfile.logo}" alt=""></div>
                        </div>
                        <div class="row__item">
                            <ul class="component-list-solution || list list-v--1 list--light">
                                <li class="list__item js-scroll js-printed-checker" th:each="c: ${corporateStyles}">
                                    <span class="list__icon js-scroll js-printed-checker">
                                        <img th:src="${c.imageUrl}"/>
                                    </span>
                                    <h2 class="list__title js-scroll js-printed-checker" th:text="${session.lang == 'en' ? c.titleEn : c.title}">中国仪器仪表行业协会副理事长单位、光学仪器分会理事长单位</h2>
                                </li>

                            </ul>
                            <a href="/about_us" class="btn btn--primary btn--large btn--light">
                                <div>
                                    <div class="btn__text" data-text="Learn more"><span>关于我们</span></div>
                                    <div class="pub-y-line"><img src="/public/images/r-line-y.png" alt=""></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home__gallery" data-nav-vertical-target>
                <div class="component-gallery-full || gallery">
                    <th:block th:each="p, status: ${products}">
                    <a th:if="${status.index == 1 || status.index == 5}" th:href="'/product_detail_' + ${p.id}" class="gallery__item gallery__item--big">
                        <div class="gallery__wrapper"><span class="gallery__back"></span>
                            <span class="gallery__img" th:style="'background-image: url(\'' + ${p.img} + '\')'"></span>
                            <div class="gallery__info">
                                <div>
                                    <h2 class="gallery__title" th:text="${p.title}">产品中心</h2>
                                    <span class="gallery__text" th:text="${p.titleEn}">Product center</span>
                                </div>
                                <div class="pub-w-line"><img src="/public/images/r-line-w.png" /></div>
                            </div>
                        </div>
                    </a>
                    <a th:if="${status.index != 1 && status.index != 5}" th:href="'/product_detail_' + ${p.id}" class="gallery__item">
                        <div class="gallery__wrapper"><span class="gallery__back"></span>
                            <span class="gallery__img" th:style="'background-image: url(\'' + ${p.img} + '\')'"></span>
                            <div class="gallery__info">
                                <div>
                                    <h2 class="gallery__title" th:text="${p.title}">产品中心</h2>
                                    <span class="gallery__text" th:text="${p.titleEn}">Product center</span>
                                </div>
                                <div class="pub-y-line"><img src="/public/images/r-line-w.png" alt=""></div>
                            </div>
                        </div>
                    </a>
                    </th:block>
                </div>
            </div>
            <div class="gallery-v&#45;&#45;2"></div>
            <!--#include file="/views/component/footer.html"-->
            <div th:replace="footer :: footer"></div>

            <script type="text/javascript" src="/public/js/index.js"></script>

            <script type="text/javascript" src="/public/js/min.js"></script>
            <script type="text/javascript" src="/public/js/wp-embed.min.js"></script>
            <script type="text/javascript" src="/public/js/countup.js"></script>
            <script>
                var printed = 0;
                var scrollFunc = function (e) {
                    if (!($('#gundong').hasClass('printed'))) {
                        printed = 0;
                    }
                    if ($('#gundong').hasClass('printed') && printed == 0) {
                        printed = 1;

                        var _sw_len = $(".stats__wrapper").length;
                        if(_sw_len >= 1) {
                            var demoFi1 = new CountUp("num1", 0, $("#num1").data("num"), 0, 1);
                            demoFi1.start();
                        }
                        if(_sw_len >= 2) {
                            var demoFi2 = new CountUp("num2", 0, $("#num2").data("num"), 0, 1);
                            demoFi2.start();
                        }
                        if(_sw_len >= 3) {
                            var demoFi3 = new CountUp("num3", 0, $("#num3").data("num"), 0, 1);
                            demoFi3.start();
                        }

                    }
                };
                /*注册事件*/
                if (document.addEventListener) {
                    document.addEventListener('DOMMouseScroll', scrollFunc, false);
                } //W3C
                window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
                $('.site-header__hamburger').on('click',function() {
                    $(this).toggleClass('js-active')
                    $('.site-header.js-sticky-element.js-show').toggleClass('js-active')
                })
            </script>

        </section>
    </main>
</div>
</body>
</html>